<template>
  <div class="msg-discuss">
      <nav class="message-nav">
          <ul>
              <li @click = "gotoAddress('/me/mymessage')">
                <span>私信</span>
                <b class="number" v-if="unReadMsg!='0'">{{unReadMsg}}</b>
              </li>
              <li class="on" @click = "gotoAddress('/me/msgdiscuss')">
                <span>评论</span>
                <b class="number" v-if="unReadPL!='0'">{{unReadPL}}</b>
              </li>
              <!--<li @click = "gotoAddress('/me/msgpraise')">-->
                <!--<span>赞</span>-->
              <!--</li>-->
              <li @click = "gotoAddress('/me/msgfans')">
                <span>新粉丝</span>
                <b class="number" v-if="newFansNum!='0'">{{newFansNum}}</b>

              </li>
              <li @click = "gotoAddress('/me/msgnews')">
                <span>通知</span>
                <b class="number" v-if="unReadNews!='0'">{{unReadNews}}</b>
              </li>
          </ul>
      </nav>
    <div>
      <div class="no-msg-content"  v-if="!have">
        <div class="no-msg">
          <img src="../../assets/me/04.png" alt="">
        </div>
        <div class="no-text">
          没有相关评论哦！
        </div>
      </div>
      <div class="msg-content"  v-else>
          <ul>

            <li class=""  v-for="item in msgList">
              <div class="ask clearFix">
                <div class="fl img-box">
                  <div class="img">
                    <img class="icon fl" :src="'http://api.piver.cn/image/users/'+item.customer_id+'.jpg'" @click="gotoAddress({path:'/otherIndex?id='+item.customer_id})">
                    <!--<b class="badgate">3</b>-->
                  </div>
                </div>
                <div class="fl font-box">

                  <div class="clearfix">
                    <div class="fl">
                      <p @click="gotoAddress({path:'/otherIndex?id='+item.customer_id})">{{item.firstname}}</p>
                      <p class="time">{{item.date_added}}</p>

                    </div>
                    <div class="fr">
                      <!--<p class="btn" v-on:click="replayFn">回复</p>-->
                    </div>
                  </div>
                  <p class="question">{{item.content}}</p>
                  <div class="answer clearFix" v-if="item.chird">
                    <img class="icon fl" src="https://dummyimage.com/40x40">
                    <div class="fl">
                      <p>莉莉</p>
                      <p>文本标签文本标签文本标签</p>
                    </div>
                  </div>

                </div>
              </div>

            </li>


          </ul>



      </div>
    </div>

    <mt-popup v-model="popupVisible3" position="bottom" class="mint-popup-3" :modal="false">
      <div class="pop-box">
        <div class="txt-box clearfix">
          <div class="fl">回复Atengt：</div>
          <div class="fc"><input type="text" class="text" value="是的呢，亲！"></div>
        </div>
        <div class="send-box">
          <span class="send-btn" @click="popupVisible3 = false" >发表</span>
        </div>
      </div>
    </mt-popup>

  </div>
</template>

<script>
  import {Toast} from 'mint-ui'

export default {
  name: 'MsgDiscuss',
  data () {
    return {
      popupVisible3: false,
      have:false,
      msgList:{},
      unReadMsg:'0',
      unReadPL:'0',
      unReadNews:'0',
      newFansNum:'0'

//
    }
  },
  methods: {
    gotoAddress(path){
      this.$router.push(path)
    },
    replayFn(){
      this.popupVisible3 = true;
    },
    initData:function(){
      var _this = this;
      var ajaxData = {};
      ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token || '';
        $.ajax({
          type:'post',
          url: RouteMap.getMsgDiscuss,
          data:ajaxData,
          success:function(res){
            if(res.code == 200){
              if(res.data.length==0){
                return
              }

              if(res.data.list){
                _this.msgList = res.data.list;
                if(_this.msgList.length>0){
                  _this.have = true;
                }
              }

            }
            else{
              //Toast(res.msg)
            }
          }
        })
    },

    getUnReadMsg:function(){
      var _this = this;
      var ajaxData1 = {};
      ajaxData1.token = sessionStorage.user && JSON.parse(sessionStorage.user).token || '';
      $.ajax({
        type:'post',
        url: RouteMap.chartNum,
        data:ajaxData1,
        success:function(res){
          if(res.code == 200){
//            console.log(res.data);
            if(utilities.isNull(res.data)){
              return;
            }
//            res.data.num = 1;
            if(res.data.num ==0){

              return;
            }
            _this.unReadMsg = res.data.num;

          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },
    getUnReadPL:function(){
      var _this = this;
      var ajaxData1 = {};
      ajaxData1.token = sessionStorage.user && JSON.parse(sessionStorage.user).token || '';
      $.ajax({
        type:'post',
        url: RouteMap.getUnReadNum,
        data:ajaxData1,
        success:function(res){
          if(res.code == 200){

            console.log(res.data);

              _this.unReadPL = res.data.total;



          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },


    getUnReadNews:function(){
      var _this = this;
      var ajaxData1 = {};
      ajaxData1.token = sessionStorage.user && JSON.parse(sessionStorage.user).token || '';
      $.ajax({
        type:'post',
        url: RouteMap.getUnReadNewsNum,
        data:ajaxData1,
        success:function(res){
          if(res.code == 200){

            console.log(res.data);

            _this.unReadNews = res.data.total;



          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },

    getUnReadFans:function(){
      var _this = this;
      var ajaxData1 = {};
      ajaxData1.token = sessionStorage.user && JSON.parse(sessionStorage.user).token || '';
      $.ajax({
        type:'post',
        url: RouteMap.getNewFansNum,
        data:ajaxData1,
        success:function(res){
          if(res.code == 200){

            console.log(res.data);

            _this.newFansNum = res.data.total;



          }
          else{
            //Toast(res.msg)
          }
        }
      })
    }


  },
  mounted:function(){

    this.initData();
    this.getUnReadMsg();
    this.getUnReadPL();
    this.getUnReadNews();
    this.getUnReadFans();

    var _this = this;
    clearInterval(utilities.timer);
    clearInterval(utilities.timer1);
    utilities.timer = setInterval(function(){

      _this.getUnReadMsg();

    },2000)

  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .msg-discuss{
    padding: 1rem 0.5rem;
  }

  .number{
    font-size: .55rem;
    color:#B01F24;
    position: absolute;
    top: -0.4rem;
    right: 0.2rem;
  }


  .msg-content li{
  background:#fff;
  box-sizing:border-box;
  padding:.4rem 0;
  margin-top:.2rem;
}

.msg-content li .icon{

  margin-right:.2rem;
}
.btn{
  background:#f5f5f5;
  padding:.1rem .4rem;
  border-radius: 2rem;
  color: #707070;
}
.question{
  padding:.5rem 0;
}
.answer{
  border-radius: 0.2rem;
  box-sizing:border-box;
  padding:.4rem;
  background:#f5f5f5;


}
  .ask {
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: .8rem;
  }
  .ask .img{
    position: relative;
  }
  .ask .img img{
    width: 2rem;
    height: 2rem;
    border-radius:50%;
  }
  .ask .img-box{
    width: 2rem;

  }
  .ask .font-box{
    width: 12.5rem;
    margin-left: .5rem;
  }
  .ask .time{
    color: #c2c2c2;
  }
  .mint-popup-3 {
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #eee;
    padding: .5rem ;
  }
  .pop-box{
    padding: 0 1rem;
  }
  .pop-box .txt-box{
    display: inline-block;
    vertical-align: middle;
    border:1px solid #707070;
    border-radius: 0.3rem;
    height: 1.5rem;
    padding: 0 0.5rem;
  }
  .pop-box .txt-box .text{
    line-height: 1.5rem;
    height: 1.5rem;
    width: 8rem;
  }
  .pop-box .fl{
    line-height: 1.5rem;
    color: #d2d2d2;
  }
  .pop-box .send-box{
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.3rem;
  }

</style>
